<template>
<div class="seven" ref="seven">
    <div class="title">
        增值服务
    </div>
    <div class="container">
        <div class="item">
            <img src="@/assets/photo/seven1.png" alt="">
            <div>
                <div class="title">
                    专属公众号搭建服务
                </div>
                <div class="content">
                    提供实验室专属微信公众号程序申请搭建服务
                </div>
            </div>
        </div>
        <div class="item">
            <img src="@/assets/photo/seven2.png" alt="">
            <div>
                <div class="title">
                    提供开放API接口
                </div>
                <div class="content">
                    开发平台接口与对接服务, 支持其他系统集成服务
                </div>
            </div>
        </div>
        <div class="item">
            <img src="@/assets/photo/seven3.png" alt="">
            <div>
                <div class="title">
                    自定义深度定制
                </div>
                <div class="content">
                    支持中大型实验室，专属深度定制服务
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import {start_to_end} from '@/assets/tools/public_tools';
export default {
    name: 'Seven',
    props:{
        back_top:{
            type:Boolean,
            default:false,
        },
    },
    watch:{
        back_top(){
            if(this.back_top){
                this.on_back_top();
            }
        },
    },
    methods:{
        on_back_top(){
            let _top = document.documentElement.scrollTop + this.$refs.seven.getBoundingClientRect().top - 85;
            start_to_end(document.documentElement.scrollTop,_top-10,300);
        },
    },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.seven{
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    border-radius: 5px;
    flex-direction: column;
    align-items:center;
    >.title{
        text-align: center;
        margin-bottom: 40px;
        font-size: 32px;
        font-weight: 600;
        line-height: 100%;
    }
    >.container{
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr;
        grid-gap: 20px;
        >.item{
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            background-color: #f5fcf9;
            padding: 40px 10px;
            border-radius: 5px;
            >div{
                margin-top: 20px;
                >.title{
                    font-size: 14px;
                    font-weight: bold;
                    margin-bottom: 20px;
                }
                >.content{
                    font-size: 14px;
                    opacity: 0.6;
                }
            }
            
        }
    }
}
</style>
